<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Session Expired Sample with Form Submit via XHR</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.product {
	cursor: pointer;
}
.hover {
	background-color: #FFFFCC !important;
}
.selected {
	background-color: #CCCCCC;
}
</style>
<script src="../../includes/xpath.js" type="text/javascript"></script>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryUtils.js" type="text/javascript"></script>
<script type="text/javascript">

<!--
//
// Create an XMLDataSet to load the states.
//
var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "/states/state");

//
// Create an XMLDataSet to load the cities for the current state.
// This points to a dynamic page that will "session expire" after 5 calls, so a re-login is required.
//

var dsCities = new Spry.Data.XMLDataSet("GetCities.asp?state={dsStates::name}", "/state/cities/city[position() >=1 and position() <= 30]", {useCache:false});

//
// Create a handler for Ajax form submission that will fill the container with the corresponding response received from the server
//

function myResponseHandler(req) 
{
	if (req.xhRequest.responseText.indexOf('successful') != -1) 
		Spry.Utils.setInnerHTML('expired_container', req.xhRequest.responseText);
	else
		Spry.Utils.setInnerHTML('error_container', req.xhRequest.responseText);
}
//-->
</script>
</head>

<body>
<h3>Session Expired Sample with Ajax Form Submit</h3>
<p>This page demonstrates how to combine the detection of the session expired with re-login without page refresh.</p>
<p>It requires asp scripting enabled on the server.</p>
<p>
	More details on <a href="SessionExpiredSample.asp.html">Session Expired</a> and <a href="../form_submission/SubmitFormWithXHRSample.asp.html">Ajax Form Submit</a>.
</p>

<hr />


<table width="100%" border="0">
	<tr>
		<td width="21%" valign="top">
		
			<div spry:region="dsStates">
				<ol spry:state="ready" spry:repeatchildren="dsStates">
					<li class="product" spry:setrow="dsStates" spry:select="selected" spry:hover="hover">{name}</li>
				</ol>
			</div>
			
		</td>
	  <td width="79%" valign="top">
	  		<br/>
				<div spry:region="dsCities dsStates" id="cities">
					<div spry:state="ready">
						<strong>The first 30 cities in the state of &quot;{dsStates::name}&quot;:</strong>
						<ol>
							<li spry:repeat="dsCities">{name}</li>
						</ol>
					</div>
					<div spry:state="loading">Loading cities..</div>
					<div spry:state="error">
							Error loading cities.. <br/>
							This sample requires <strong>asp support</strong> on the server.
					</div>
					<div spry:state="expired" id="expired_container">
						<strong>Your session has expired!</strong> <br/>
						You need to re-login in order to access the list of cities. <br/>
						Username / password: admin / pass12 <br/>
						<br/>
						<div id="error_container"></div>
						<br/>
						<form id="form1" name="form1" method="post" action="HandleLoginForSessionExpired.asp" onsubmit="return Spry.Utils.submitForm(this, myResponseHandler, { additionalData:'ajax=true' });">
								<div>
										<div>Username:</div>
										<input name="username" type="text" id="username" value=""/>
								</div>
								<div>
										<div>Password:</div>
										<input name="pass" type="password" id="pass" value=""/>
								</div>
								<div>
										<input type="submit" value="Login"/>
								</div>
						</form>
						
					</div>
				</div>	
	  </td>
  </tr>
</table>

</body>
</html>
 
